<template>
   <div class="big">
         <div class="top">
            搜索条件
            <div class="select">
                <div class="name">姓名：<el-input v-model="realName" placeholder="请输入姓名"></el-input></div>
                <div class="phone">手机号：<el-input v-model="phone" placeholder="请输入手机号"></el-input></div>
                <el-button class="found" type="primary" @click="found">查询</el-button>
            </div>
        </div>
        <div class="info">
            <div class="user">员工信息</div>
            <div class="daochu" @click="daochu">
                <img src="../assets/img/daochu.png" alt="">
                导出提现记录
            </div>
        </div>
        <el-dialog title="导出提现记录" :visible.sync="show5" width="335px">
            <div class="block">
                <!-- <span class="demonstration">默认</span> -->
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </div>
            <div class="button">
                <el-button class="btn1" @click="downFile">确认</el-button>
                <el-button class="btn2" @click="no">取消</el-button>
              </div>
        </el-dialog>
        <div>
            <el-table
            :data="list"
            style="width: 100%"
            :header-cell-style="{
                'border-bottom': '5px solid #eee'
            }"
            >
            <el-table-column
                prop="name"
                label="姓名"
                width="200"
            >
            </el-table-column>
            <el-table-column
                prop="idCard"
                label="身份证号"
                width="200">
            </el-table-column>
            <el-table-column
                prop="phone"
                width="200"
                label="手机号">
            </el-table-column>
            <el-table-column
                prop="specialties"
                width="200"
                label="特长（技能）">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                min-width="200">
                <template slot-scope="scope">
                <el-button @click="idcard(scope.row)" type="text" size="small">身份证</el-button>
                <el-button @click="payslip(scope.row)" type="text" size="small">工资单</el-button>
                <el-button @click="record(scope.row)" type="text" size="small">提现记录</el-button>
                </template>
            </el-table-column>
            </el-table>
            <el-pagination
                background
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :current-page="pageIndex"
                :page-size="pageSize"        
                layout="prev, pager, next"
                :total="total"
                >
            </el-pagination>
        </div>
        <!-- 身份证 -->
        <el-dialog title="身份证照片" :visible.sync="show1" width="677px">
            <!-- <div class="title">身份证照片</div> -->
            <ul class="idcard">
            <li>
                <img :src="zhengIdCardUrl" alt="">
            </li>
            <li>
                <img :src="fanIdCardUrl" alt="">
            </li>
            </ul>
        </el-dialog>
        <!-- 工资条 -->
            <el-dialog title="工资条" :visible.sync="show2" width="778px">
            <!-- <div class="title">工资条</div> -->
            <el-select v-model="value" @change="Glook" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
            </el-select>
            <el-table
            :data="Plist"
            style="width: 100%"
            height="350"
            :header-cell-style="{
                'border-bottom': '5px solid #eee'
            }">
            <el-table-column
                prop="name"
                label="姓名"
                width="120">
            </el-table-column>
            <el-table-column
                prop="money"
                label="金额（元）"
                width="120">
            </el-table-column>
            <el-table-column
                prop="timeFormat"
                label="发放时间"
                width="200">
            </el-table-column>
                <el-table-column
                prop="remarks"
                width="120"
                label="备注"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="签字确认"
                min-width="120"
                >
                <template slot-scope="scope">
                <el-button @click="autograph(scope.row)" type="text" size="small">查看</el-button>
                </template>
            </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 签名 -->
        <el-dialog title="签名" :visible.sync="show4" width="335px">
            <!-- <div class="div1" v-if="this.isOk == 1">工资条还未确认</div> -->
            <img :src="qmUrl" alt="" class="qm">
        </el-dialog>
        <!-- 提现记录 -->
            <el-dialog title="提现记录" :visible.sync="show3" width="778px">
            <!-- <div class="title">提现记录</div> -->
            <el-select v-model="value" @change="Mlook" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
            </el-select>
            <el-table
            :data="Rlist"
            style="width: 100%"
            height="350"
            :header-cell-style="{
                'border-bottom': '5px solid #eee'
            }">
            <el-table-column
                prop="withdrawalBankNo"
                label="收款方账号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="withdrawalBank"
                label="开户行名"
                width="120">
            </el-table-column>
            <el-table-column
                prop="withdrawalName"
                label="收款方户名"
                width="120">
            </el-table-column>
            <el-table-column
                prop="withdrawalMoney"
                label="提现金额（元）"
                width="120">
            </el-table-column>
            <el-table-column
                prop="createTimeFormat"
                label="提现时间"
                width="180">
            </el-table-column>
            </el-table>
        </el-dialog>
   </div>
</template>
<script>
   
    export default {
        data() {
            return {
                list:[], //工资表
                Plist:[],//工资条
                Rlist:[],//提现记录
                total:0,//员工表格总条数
                pageIndex:1,
                pageSize:5,
                realName:'',
                phone:"",
                show1:false,
                show2:false,
                show3:false,
                show4:false,
                show5:false,//导出提现记录
                zhengIdCardUrl:'',
                fanIdCardUrl:'',
                qmUrl:'',
                options: [{
                    value: '2019',
                    label: '2019'
                    }, {
                    value: '2020',
                    label: '2020'
                    }, {
                    value: '2021',
                    label: '2021'
                    }, {
                    value: '2022',
                    label: '2022'
                    }, {
                    value: '2023',
                    label: '2023'
                }],
                // huiyuan:0
                value: '',
                Rid:'',
                Pid:'',
                value1: '',//时间
                isOk:''
            }
        },
        created(){
            this.userInfo()
            // this.currentChangePage()
        },
       
        methods: { 
            time(date) {
                var y = date.getFullYear()
                var m = date.getMonth() + 1
                m = m < 10 ? '0' + m : m
                var d = date.getDate()
                d = d < 10 ? '0' + d : d
                var h = date.getHours()
                h = h < 10 ? '0' + h : h
                var minute = date.getMinutes()
                minute = minute < 10 ? '0' + minute : minute
                var second = date.getSeconds()
                second = second < 10 ? '0' + second : second
                return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
            },
            // var date = new Date("2020-05-12T09:18:51.000+0000");
            // var date1 = this.time(date);
            // console.log(date1);
            
            //导出提现记录
            daochu(){
                this.show5 = true
            },
              //导出提现记录
              downFile(){
                if(!this.value1){
                    alert('请选择时间')
                }else{
                    this.value1 = this.time(new Date(this.value1))
                    this.$axios({
                        method: 'get',
                        url: '/xls/cashWithdrawalTime',
                        params: {
                            timeFormat:this.value1,     
                        },
                        responseType: 'arraybuffer'
                        }).then(res=>{
                            console.log(res.data)
                            var fileName = '员工提现记录.xls'//此处获取文件名称
                　　　　　　　this.download(res.data,fileName) //此处跳转到第三步
                            this.show5 = false
                        },err=>{
                            console.log(err);
                    })
                }
                
                }, 
                download (data,fileName) {
            　　　if (!data) {
            　　　　　return
            　　　}
            　　　let url = window.URL.createObjectURL(new Blob([data])) //创建下载链接
            　　　let link = document.createElement('a') //创建a标签
            　　　link.style.display = 'none'  //将a标签隐藏
            　　　link.href = url  //给a标签添加下载链接
            　　　link.setAttribute('download', fileName) // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
            　　　document.body.appendChild(link)  
            　　　link.click()  //执行a标签
            　　},
            no(){
                this.show5 = false
            },
            //查询
            found(){
                this.$axios({
                    method: 'post',
                    url: '/laowuUser/viewEmployeeInformation',
                    params: {
                        pageIndex:this.pageIndex,
                        pageSize:this.pageSize,
                        realName:this.realName,
                        phone:this.phone
                    }
                    }).then(res=>{
                        this.list = res.data.data.dtos 
                        this.total = res.data.data.total
                        this.list.map(function (val) {
                            console.log(val.specialties)
                            val.specialties.forEach((item)=>{
                                if(item ==1){
                                    val.specialties += '裁剪，'
                                }else if(item==2){
                                    val.specialties += '制板，'
                                }else if(item==3){
                                    val.specialties += '业务，'
                                }else if(item == 4){
                                    val.specialties += '样衣，'
                                }else if(item == 5){
                                    val.specialties += '品控，'
                                }
                            }) 
                            val.specialties = val.specialties.replace(/[^\u4e00-\u9fa5]/g, " ")
                            return val.specialties
                            console.log(val.specialties)
                        })
                    },err=>{
                        console.log(err);
                })
            },
          
            //员工信息分页
            handleSizeChange1: function(pageSize) { // 每页条数切换
                this.pageSize = pageSize
                
                this.handleCurrentChange1(this.pageIndex);
            },
            handleCurrentChange1: function(pageIndex) {//页码切换
                this.pageIndex = pageIndex
                // this.currentChangePage(this.list,pageIndex)
                this.userInfo()
                
            },

            //员工信息
            userInfo(){
            this.$axios({
                method: 'post',
                url: '/laowuUser/viewEmployeeInformation',
                params: {
                    pageIndex:this.pageIndex,
                    pageSize:5,
                    // year:'2021'
                    realName:this.realName,
                    phone:this.phone
                }
                }).then(res=>{
                    console.log(res.data);
                    // this.time = res.data.data.laowuUser.createTime
                    this.list = res.data.data.dtos 
                    this.total = res.data.data.total
                    this.list.map(function (val) {
                        val.specialties.forEach((item)=>{
                        if(item==1){
                            val.specialties += '裁剪、'
                        }else if(item==2){
                            val.specialties += '制板、'
                        }else if(item==3){
                            val.specialties += '业务、'
                        }else if(item == 4){
                            val.specialties += '样衣、'
                        }else if(item == 5){
                            val.specialties += '品控、'
                        }
                        })
                        val.specialties = val.specialties.replace(/[^\u4e00-\u9fa5]/g, " ")
                        return val.specialties
                        console.log(val.specialties)
                    })
                },err=>{
                    console.log(err);
                })
               
            },
            
            //身份证
            idcard(row){
            console.log(row)
            this.show1 = true
            this.$axios({
                method: 'get',
                url: '/laowuUser/viewIDCard',
                params: {
                    id:row.userId
                }
                }).then(res=>{
                    console.log(res.data);
                    this.zhengIdCardUrl=res.data.data[0]
                    this.fanIdCardUrl=res.data.data[1]
                },err=>{
                    console.log(err);
            })

            },
            //工资单
            payslip(row){
            console.log(row,"23432")
            this.Pid = row.userId
            this.show2 = true
            this.$axios({
                method: 'get',
                url: '/laowuUser/viewPayslip',
                params: {
                    userId:this.Pid,
                    year:2021
                }
                }).then(res=>{
                    console.log(res.data);
                    this.Plist = res.data.data
                    for(var i = 0;i < this.Plist.length;i++){
                        console.log(i)
                        // this.isOk = this.Plist[i].isOk
                        // console.log(this.isOk)
                    }
                    // console.log(this.isOk)
                    // this.isOk = res.data.data[0].isOk
                    // console.log(this.isOk)
                },err=>{
                    console.log(err);
            })
            },
            //工资条的查询
            Glook(row){
                // console.log(row,"0000")
                this.$axios({
                method: 'get',
                url: '/laowuUser/viewPayslip',
                params: {
                    userId:this.Pid,
                    year:row
                }
                }).then(res=>{
                    console.log(res.data);
                    this.Plist = res.data.data
                },err=>{
                    console.log(err);
            })
            },
            //提现记录
            record(row){
            console.log(row,"58946587")
            this.show3 = true
            this.Rid = row.userId
            this.$axios({
                method: 'get',
                url: '/laowuUser/lookWithdrawal',
                params:{
                    id:row.userId,
                    year:2021
                }
                }).then(res=>{
                    console.log(res.data);
                    this.Rlist = res.data.data
                },err=>{
                    console.log(err);
            })
            },
            //提现记录的查询
            Mlook(row){
            console.log(row,"00000")
            this.$axios({
                method: 'get',
                url: '/laowuUser/lookWithdrawal',
                params:{
                    id:this.Rid,
                    year:row
                }
                }).then(res=>{
                    console.log(res.data);
                    this.Rlist = res.data.data
                },err=>{
                    console.log(err);
            })
            },
            //查看签名
            autograph(row){
                console.log(row,"11111111111")
                this.isOk = row.isOk
                if(row.isOk == 1){
                   this.show4 = false
                }else if(row.isOk == 2){
                    this.show4 = true
                    this.$axios({
                        method: 'get',
                        url: '/laowuUser/lookSignature',
                        params:{
                            id:row.id
                        }
                        }).then(res=>{
                            console.log(res.data);
                            this.qmUrl = res.data.data
                        },err=>{
                            console.log(err);
                    })
                }
                
            },
           
          


        }
  }
</script>

<style>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
  box-sizing: border-box;
}
li {
  display: inline-block;
  margin: 0 10px;
  
}
a {
  text-decoration: none;
  color: #0263D5;
}
.big{
    height: 100vh;
}
.top .select{
    /* width: 1040px; */
    height: 90px;
    /* line-height: 90px; */
    background: #FFFFFF;
    display: flex;
    /* justify-content: space-around; */
    align-items: center;
    margin-top: 16px;
    margin-bottom: 28px;
}
.top .select .name{
    margin-left: 20px;
    margin-right: 60px;
}
.top .select .el-input{
    border: none;
    width: 200px;
    height: 30px;
    background: #FFFFFF;
    border-radius: 2px;
    /* border: 1px solid #D5DAE1; */
}

.found{
    width: 100px;
    height: 40px;
    /* line-height: 40px; */
    background: #108EE9;
    border-radius: 3px;
    margin-left: 40px;
    margin-top: 8px;
}
.demo-form-inline{
    /* // width: 1040px; */
    height: 90px;
    /* // line-height:90px; */
    background: #FFFFFF;
    display:flex;
    justify-content:space-around;
    align-items:center;
    margin-top:14px;
}
.el-input{
    margin-left:10px;
}
.info{
    display: flex;
    justify-content: space-between;
}
.info .daochu{
    /* width: 84px;
    height: 20px; */
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #0263D5;
    /* line-height: 20px; */
}
.el-table{
    width: 1040px;
    height: 316px;
    background: #FFFFFF;
    margin-top: 16px;
    /* padding: 0 10px; */
}
.el-table-column{
    margin-left: 20px;
}
.el-pagination{
    background: #fff;
}
/* .el-dialog .title,.el-dialog .title1{
  height: 44px;
  background: #108EE9;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 44px;
  text-align:center;
  // margin-bottom:60px;
}
.el-dialog .title1{
  width:300px;
} */
.el-dialog .block{
    margin: 40px 0;
    margin-left: 30px;
}
.el-dialog .rate{
  position: relative;
  

}
.el-dialog .rate .el-input{
  width: 255px;
  height: 54px;
  margin: 0 20px;
}
.el-dialog .rate .pos{
  position: absolute;
  top: 10px;
  right: 50px;
  /* z-index: 3; */
}
.idcard li{
  display: inline-block;
}
.idcard li img{
  margin-top:60px;
  width: 296px;
  height: 185px;
  /* margin-right: 0px; */
}
.el-dialog .qm{
    width: 236px;
    height: 140px;
    font-size: 100px;
    font-family: MLingWaiMedium-SC, MLingWaiMedium;
    font-weight: normal;
    color: #333333;
    line-height: 140px;
    margin: 35px 30px;
}
.el-dialog .div1{
    width: 236px;
    height: 140px;
    font-size: 30px;
    font-family: MLingWaiMedium-SC, MLingWaiMedium;
    font-weight: normal;
    color: #333333;
    line-height: 140px;
    margin: 35px 30px;
}
.el-dialog .el-select{
  margin:30px 0;
}
.el-dialog .mon{
  width: 255px;
  height: 54px;
  margin: 40px 20px;
  margin-bottom:20px;
}
.el-dialog .button{
  width: 255px;
  margin: 0 20px;
}
.el-dialog .button .btn1,.el-dialog .button .btn2{
  width: 92px;
  height: 36px;
  /* margin-right: 50px;
  margin-left: 30px; */
}
.el-dialog .button .btn1{
  margin-left: 11px;
  margin-right: 34px;
}
</style>